export class WaterText {
  constructor(text = '水印', dom, option = {}) {
    this.text = text
    this.option = option
    this.dom = dom
    // 初始化
    this.init()
  }

  init() {

    if (!this.text) {
      return
    }
    const canvas = document.createElement('canvas');
    
    // // 设置canvas样式
    // canvas.style.border = '1px solid black';
    // // 获取body元素以便插入canvas
    // const body = document.getElementsByTagName('body')[0];    
    // // 将canvas添加到body中
    // body.appendChild(canvas);
    
    // 获取canvas的2D渲染上下文
    const ctx = canvas.getContext('2d');
    
    // // 删除 canvas
    // body.removeChild(canvas)

    
    const fontSize = 30; // 字体大小
    ctx.font = fontSize + 'px Arial'; // 设置字体样式
    ctx.fillStyle = this.option?.color || 'red' // 半透明红色


    if (this.option && (this.option.width || this.option.height)) {
      canvas.width = this.option.width || 400
      canvas.height = this.option.height || 300
    } else {
      const textWidth = ctx.measureText(this.text).width;
      const canvasWidth = (textWidth * Math.sqrt(3)) / 2
      const canvasHeight = textWidth / 2
      canvas.width = canvasWidth
      canvas.height = canvasHeight
    }
    const scale = 1.5
    ctx.scale(scale, scale)
    
    ctx.translate(
      canvas.width / 2 / scale,
      canvas.height / 2 / scale
    );
    ctx.rotate(-Math.PI / 6);

    ctx.fillStyle = this.option?.color || '#efefef' // 半透明红色
    ctx.fillText(this.text, -canvas.width / 7 * scale, 0)

    this.dataURL = canvas.toDataURL('image/png');

  }

  renderer() {
    // 动态创建div元素
    const div = document.createElement('div');

    // 直接通过style属性设置样式
    div.style.position = 'fixed';
    div.style.top = '0';
    div.style.left = '0';
    div.style.width = '100%';
    div.style.height = '100%';
    div.style.backgroundColor = 'transparent'; // 如果需要，可以设置背景颜色
    // div.style.backgroundSize = 'cover';
    div.style.backgroundRepeat = 'repeat';
    // 设置穿透
    div.style.pointerEvents = 'none';
    // div.style.zIndex = '-1'; // 确保div在其他内容下方
    
    // 设置div的背景图像为dataURL
    div.style.backgroundImage = 'url(' + this.dataURL + ')';


    // 如果 dom 是 Html 元素，直接挂载到对应元素上页面
    if (this.dom && this.dom instanceof HTMLElement) {
      this.dom.appendChild(div);
    }
    // 如果 dom 不存在
    if (!this.dom) {
      console.warn('未找到要挂载的元素')
      // 将div元素添加到body中
      document.body.appendChild(div);
    }
  }
}